import {MultiBoradBarInterface} from "../../interface/GuiInterface";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {ColorStr, MultiBoradRow} from "../../../script/type/Type";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {ResourceKey} from "../../../script/constant/ResourceConstant";


export interface IProp {
    getRows: () => { rows: MultiBoradRow[], title: string };
}
export interface IState {
    rows: MultiBoradRow[];
    title: string;
}

const shows = ['userName', 'heroLevel', 'fightValue' ]

export default class MultiBoradBar extends MultiBoradBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        const rows = props.getRows().rows;
        this.state = {
            visible: true,
            rows: rows,
            title: '',
        }
    }
    render = () => {
        const itemWidth = 0.08;
        const itemHeight = 0.02;
        const rowLen = this.state.rows.length;
        const firstRow = this.state.rows[0];
        const keys = Object.keys(firstRow);
        const keyLen = keys.length;

        let visibleNum = 0;
        for (let i = 0; i < rowLen; i++) {
            const row = this.state.rows[i];
            const heroLevel = row.heroLevel;
            if (CodeUtil.isNullOrZero(heroLevel)) {
            } else {
                visibleNum = visibleNum + 1
            }
        }

        const backSize = { w: itemWidth * keyLen + 0.01, h: itemHeight * visibleNum };

        const left = 1 - backSize.w;
        const top = 0.1

        const multiBarTitleBoard = Configer.getResource(ResourceKey.multiBarTitleBoard)
        const multiBarItemBoard = Configer.getResource(ResourceKey.multiBarItemBoard)

        const multiBarOpenButton = Configer.getResource(ResourceKey.multiBarOpenButton)
        const multiBarCloseButton = Configer.getResource(ResourceKey.multiBarCloseButton)

        const padding = { l: 0.008, t: 0.005 };

        const buttonSize = { h: 0.018, w: 0.012 };
        let buttonImage;
        if (this.state.visible) {
            buttonImage = multiBarOpenButton;
        } else {
            buttonImage = multiBarCloseButton;
        }

        return <View   key = {`${GuiKeys.multiBar}`} style={{ width: backSize.w, height: backSize.h, left: left, top: top }}>
            {
                this.state.rows.map((row, rowsIndex) => {
                    const keys = Object.keys(row);
                    // const heroName = row.heroName;
                    const heroLv = row.heroLevel;
                    let hidden = false;
                    let back;
                    let color: ColorStr;
                    if (CodeUtil.isNullOrZero(heroLv)) {
                        hidden = true;
                    }
                    if (rowsIndex === 0) {
                        back = multiBarTitleBoard;
                        color = ColorStr.darkgreen
                    } else {
                        back = multiBarItemBoard;
                        color = ColorStr.white
                        hidden = hidden || !this.state.visible;
                    }
                    return <View   key={`${GuiKeys.multiBarRowsItem}|${rowsIndex}`} style={{ backgroundImage: back, hidden: hidden, width: backSize.w, height: itemHeight }}>
                        {
                            shows.map((key, rowIndex) => {
                                const value = row[key];
                                return <View   key={`${GuiKeys.multiBarRowItem}|${rowsIndex}|${rowIndex}`} onMouseDown={() => { return this.choosePlayer(rowIndex) }} style={{ hidden: hidden, width: itemWidth, height: itemHeight, fontSize: 0.013, color: color, paddingL: padding.l, paddingT: padding.t }}>{value}</View>
                            })
                        }
                    </View>
                })
            }
            <View   key={GuiKeys.multiBarButton} onMouseDown={this.clickButton} style={{ backgroundImage: buttonImage, width: buttonSize.w, height: buttonSize.h, float: true, marginL: backSize.w - buttonSize.w - 0.005, marginT: (itemHeight - buttonSize.h) / 2 }}></View>
        </View>
    }

    clickButton = () => {
        if (this.state.visible) {
            this.closeBar();
        } else {
            this.openBar();
        }
    }

    openBar = () => {
        const ret = this.props.getRows();
        const rows = ret.rows;
        const title = ret.title;
        this.setState({
            visible: true,
            rows: rows,
            title: title,
        });
    }

    choosePlayer = (index: number) => {
        const syncData: UISyncData = { id: SyncId.selectHero, param: { selectIndex: index } };
        return syncData;
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        });
    }

    getVisible = () => {
        return this.state.visible
    }
}